<template>
  <div class="layout">
    <header>
      <h1></h1>
      <el-popover width="200" popper-class="layout_header_popver">
        <div class="t">
          <div class="user"></div>
          <div>
            <div class="user_name">{{userInfo.userName}}</div>
            <div class="user_pos">总理</div>
          </div>
        </div>
        <div class="b" @click="logOff()">
          <i class="iconfont icon-tuichuexit"></i>
          <span>退出账号</span>
        </div>
        <div class="user" slot="reference"></div>
      </el-popover>
      
    </header>
    <main>
      <router-view />
    </main>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { logOut } from '@/api/login'
export default {
  name: "layout",
  data() {
    return {
      
    };
  },
  computed:{
    ...mapGetters(['userInfo'])
  },
  methods: {
    async logOff() {
      await logOut().then(res => {
        console.log('res', res);
        if(res.code == 200){
          store.commit('setToken', '')
          store.commit('setUserInfo', null)
          this.$router.push({ name: 'login' })
          this.$message.success(res.msg)
        }
      })
    },
  },
  created() {
    
  },
};
</script>

<style lang="scss" scoped>
.layout{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: #F7F8FC;
  header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    padding-right: 31px;
    padding-left: 14px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0,59,136,0.1);
    h1{
      width: 200px;
      height: 38px;
      background: url(@/assets/imgs/logo.png) no-repeat;
      background-size: 100%;
    }
    .user{
      width: 34px;
      height: 34px;
      background: url(@/assets/imgs/user.png) no-repeat;
      background-size: 100%;
      cursor: pointer;
    }
  }
  main{
    flex: 1;
    overflow-y: auto;
  }
}
</style>
<style lang="scss">
/* 不要在这里加其他样式, 会污染全局 */
.layout_header_popver{
  padding: 0;
  .t{
    display: flex;
    align-items: center;
    padding: 20px;
    .user{
      width: 51px;
      height: 51px;
      margin-right: 10px;
      background: url(@/assets/imgs/user.png) no-repeat;
      background-size: 100%;
    }
    .user_name{
      line-height: 24px;
      margin-bottom: 6px;
      font-size: 16px;
      font-weight: 500;
      color: #222;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .user_pos{
      height: 18px;
      line-height: 18px;
      padding: 0 10px;
      color: #1B62FF;
      background: #E9F0FF;
      border-radius: 4px;
    }
  }
  .b{
    display: flex;
    align-items: center;
    height: 54px;
    padding-left: 27px;
    border-top: 1px solid #EBEDF0;
    transition: background .2s;
    cursor: pointer;
    &:hover{
      background: #f5f7fa;
    }
    i{
      margin-right: 10px;
    }
    span{
      font-size: 14px;
      color: #222;
    }
  }
}
</style>
